import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { useUpdateEffect } from '@umijs/hooks';
import { Tooltip, Row, Col, Card, Form, Input, Button, Modal } from 'antd';
import dynamic from 'umi/dynamic';
import LoadingComponent from '@/components/PageLoading/index';
import SlickTable from '@/components/SlickTable';
import useSlickTable from '@/hooks/useSlickTable';
import request from '@/utils/request';
import FlowCatalogTree from '../FlowCatalogTree';

const { info, success, warning } = Modal;
const FormItem = Form.Item;

const namespace = 'flowTacheConfig';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

// 判断空对象
const isEmptyObject = obj => {
  if (Object.keys(obj).length === 0) {
    return true;
  }
  return false;
};

function SubFlowCfg(props) {
  const { getFieldDecorator } = props.form;
  const [params, setParams] = useState({}); // 查询条件
  const [selectRow, setSelectRow] = useState({}); // 选中的行记

  // 初始化表格数据
  const { tableProps } = useSlickTable(
    { pageSize: 10 },
    'pmc/pms/pmOrderFlowDef/queryPage',
    params
  );

  useEffect(() => {
    if (!isEmptyObject(props.selectCatalog)) {
      // request('/project/OrderFlowExecController/modifyOrderFlowExec.do',{
      //   data: submintData
      // }).then(res => {
      //   if (res.resultCode && res.resultCode === 'TRUE') {
      //       // props.setUrgeTimeCfgFlag(false);
      //       props.handleDealModeCallBack(false);
      //   } else {
      //     info({title: "提交失败", content: (res.resultMsg)});
      //   }
      // });
    }
  }, [props.selectCatalog]);

  const initData = () => {};

  // 初始化
  useEffect(() => {
    initData();
  }, []);

  const handleQuery = () => {
    const formData = props.form.getFieldsValue();
    formData.pageSize = 5;
    formData.pageNum = 1;
    formData.gb_reset = true;
    setParams(formData);
  };

  // 表单重置
  const handleReset = () => {
    props.form.resetFields(); // 这是重置为默认值
  };

  const handleOk = () => {
    const submitData = {};
    submitData.flowNodeId = props.selectRecord.flowNodeId;
    if (selectRow !== undefined && !isEmptyObject(selectRow)) {
      submitData.subFlowId = selectRow.flowId;
    }
    request('pmc/pms/pmOrderFlowNode/updateSubFlow', {
      data: submitData,
    }).then(res => {
      if (res.success && res.success === true) {
        props.handleSubFlowVisible(false);
        props.handleSubFlowCallBack();
      } else {
        info({ title: '提交失败', content: res.errMessage });
      }
    });
  };

  // 通过‘x’关闭弹窗
  const handleCancel = () => {
    const { handleSubFlowVisible } = props;
    handleSubFlowVisible(false);
  };

  // 表格选中
  const handleSelectRows = record => {
    if (record != null && record.length > 0) {
      setSelectRow(record[0]);
    } else {
      setSelectRow({});
    }
  };

  const cellStyle = {
    maxWidth: 200,
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    cursor: 'pointer',
  };

  const columns = [
    {
      title: '流程名称',
      dataIndex: 'flowName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '流程编码',
      dataIndex: 'flowCode',
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
    },
  ];

  return (
    <Modal
      title="环节关联子流程"
      visible={props.modalVisible}
      width="60%"
      onCancel={() => {
        handleCancel();
      }}
      onOk={() => {
        handleOk();
      }}
    >
      {/* <div className="site-card-wrapper">
        <Row gutter={24}>
          <Col span={6}>
            <Card
              title="流程选择"
              className="cute"
              style={{height: '100%'}}
            >
              <FlowCatalogTree selectRecord={selectRecord} />
            </Card>
          </Col>
          <Col span={18}> */}
      <Form style={{ marginBottom: 10 }}>
        <Row>
          <Col span={8}>
            <FormItem label="流程名称" {...formItemLayout}>
              {getFieldDecorator('flowName')(<Input placeholder="请输入流程名称" />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="流程编码" {...formItemLayout}>
              {getFieldDecorator('flowCode')(<Input placeholder="请输入流程编码" />)}
            </FormItem>
          </Col>
        </Row>
        <div style={{ textAlign: 'center' }}>
          <Button
            type="primary"
            className="margin-right"
            onClick={() => {
              handleQuery();
            }}
          >
            查询
          </Button>
          <Button type="default" onClick={handleReset}>
            重置
          </Button>
        </div>
      </Form>
      <Card className="cute">
        <SlickTable
          rowKey={record => record.flowId}
          columns={columns}
          {...tableProps}
          scroll={{ x: 'max-content' }}
          pick="radio"
          onSelectRow={handleSelectRows}
        />
      </Card>
      {/* </Col>
        </Row>
      </div> */}
    </Modal>
  );
}

export default connect(({ flowTacheConfig, setting }) => ({
  selectRecord: flowTacheConfig.selectRecord,
  selectCatalog: flowTacheConfig.selectCatalog,
  size: setting.size,
}))(Form.create()(SubFlowCfg));
